﻿@import (reference) "variables";
@import "variables";
@import "mixins";

.header {
    position: fixed;
    width: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10002;
    top: 0;
    height: 55px;

    .logo {
        background: url("../images/common/logo.png") no-repeat;
        z-index: 10002;
        height: 40px;
        background-size: 190px;
        width: 94%;
        margin: auto;
        max-width: 640px;
        margin-top: 8px;
    }

    .open {
        background: url(../images/common/open.png) no-repeat;
        top: 5px;
        right: 0;
        height: 40px;
        background-size: 60px;
        width: 60px;
    }
}

.feelItem {
    height: 55px;
    width: 100%;

    .feelImg {
        top: 0;
        left: 0;
        background: url(../images/common/feel.png) no-repeat;
        height: 55px;
        background-size: 55px;
        width: 55px;
        transform: rotate(0deg);
    }

    .title {
        background-color: #fff;
        /*右左*/
        box-shadow: 4px 0 2px rgba(0, 0, 0, 0.1), inset 3px 0 2px rgba(0, 0, 0, 0.2), 0 -2px 2px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1);
        top: 25px;
        left: 28px;
        padding: 1px 5px 1px 8px;
        border-radius: 0px @AvatarBorderRadius @AvatarBorderRadius 0px;
        font-size: @fontSizeS;
    }

    .feelRotate0 {
        animation: rotate0 0.5s forwards;
    }

    .feelRotate180 {
        animation: rotate180 0.5s forwards;
    }
}

.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
    background-color: #fff;
    border-top: 1px solid #ccc;
    z-index: 10002;

    .main {
        width: 94%;
        height: 50px;
        margin: auto;
        max-width: 640px;

        .companyName {
            float: left;
            width: 30%;
            line-height: 50px;
            text-align: left;
            font-size: @fontSizeM;
        }

        .topicAbout {
            float: right;
            width: 70%;
            line-height: 50px;
            text-align: right;
            font-size: @fontSizeS;
            color: @timeColor;
        }

        .clearfix();
    }
}

.loading {
    /*background: url(../images/chat_ajax_loading.gif) no-repeat center center;*/
    height: 55px;
    width: 100%;
    top: -40px;
    margin-left: -25px;
}

.spinner {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1), 2px 1px 0px #f5c24f;
    -moz-animation: spin 0.7s linear infinite;
    -webkit-animation: spin 0.7s linear infinite;
    animation: spin 0.7s linear infinite;
    display: inline-block;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
}

@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.headerAnimationTop {
    animation: headerAnimationTop 0.5s ease-in-out forwards;
}

.headerAnimationDown {
    animation: headerAnimationDown 0.5s ease-in-out forwards;
}

.footerAnimationTop {
    animation: footerAnimationTop 0.5s ease-in-out forwards;
}

.footerAnimationDown {
    animation: footerAnimationDown 0.5s ease-in-out forwards;
}

@keyframes rotate0 {
    0% {
        transform: rotate(45deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes rotate180 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(45deg);
    }
}


@keyframes headerAnimationTop {
    0% {
        top: 0;
    }

    100% {
        top: -60px;
    }
}

@keyframes headerAnimationDown {
    0% {
        top: -60px;
    }

    100% {
        top: 0;
    }
}

@keyframes footerAnimationTop {
    0% {
        bottom: 0;
    }

    100% {
        bottom: -60px;
    }
}

@keyframes footerAnimationDown {
    0% {
        bottom: -60px;
    }

    100% {
        bottom: 0;
    }
}
